<style scoped>
    .site-category {
        z-index: -1;
    }

    @media screen and (max-width: 1099px) {
        .site-category {
            display: none;
        }
    }

    .menu {
        width: 80%;
        margin: auto;
        text-align: center;
        display: grid;
        grid-auto-flow: row dense;
        grid-template-columns: repeat(9, 11.11%);
        grid-template-rows: 100%;
    }
</style>
<template>
    <div class="site-category">
        <Menu mode="horizontal" theme="light" class="menu">
            <MenuItem name="0">
                <strong>首页</strong>
            </MenuItem>
            <MenuItem :name="index+1" v-for="(item, index) in list" :key="index">
                <Dropdown  @on-click="handleClick">
                    <strong>{{item.name}}</strong>
                    <DropdownMenu slot="list">
                        <DropdownItem v-for="(lists, ind) in item.child" :key="ind" :name="lists.key">{{lists.name}}</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </MenuItem>
        </Menu>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                list: [
                    {
                        name: "居家生活",
                        child: [
                            {name: "家居布艺", key: "床品"},
                            {name: "家居家装", key: "家具"},
                            {name: "日用收纳", key: "收纳"},
                            {name: "厨房用品", key: "厨房"},
                            {name: "餐具水具", key: "餐具"},
                            {name: "办公用品", key: "办公"},
                            {name: "宠物生活", key: "宠物"},
                        ]
                    },
                    {
                        name: "服饰鞋包",
                        child: [
                            {name: "男装", key: "男式 服"},
                            {name: "女装", key: "女式 服"},
                            {name: "居家内搭", key: "内衣"},
                            {name: "男鞋", key: "男鞋"},
                            {name: "女鞋", key: "女鞋"},
                            {name: "配饰", key: "鞋配"},
                        ]
                    },
                    {
                        name: "生鲜美食",
                        child: [
                            {name: "酒类", key: "酒类"},
                            {name: "水饮", key: "饮料"},
                            {name: "冲饮茗茶", key: "茗茶"},
                            {name: "粮油调味", key: "调味"},
                            {name: "特色生鲜", key: "水果"},
                            {name: "休闲零食", key: "小食糖巧"},
                        ]
                    },
                    {
                        name: "数码家电",
                        child: [
                            {name: "手机数码", key: "数码"},
                            {name: "摄影摄像", key: "数码"},
                            {name: "数码配件", key: "数码"},
                            {name: "家用电器", key: "电器"},
                            {name: "个护健康", key: "护理"},
                            {name: "外设设备", key: "数码家电"},
                        ]
                    },
                    {
                        name: "运动旅行",
                        child: [
                            {name: "户外旅行", key: "旅行"},
                            {name: "运动服饰", key: "运动"},
                            {name: "运动健身", key: "健身"},
                            {name: "运动配件", key: "运动配件"},
                        ]
                    },
                    {
                        name: "个护清洁",
                        child: [
                            {name: "面部护理", key: "面部护理"},
                            {name: "身体护理", key: "身体护理"},
                            {name: "女性护理", key: "女性护理"},
                            {name: "男性护理", key: "护理 电器"},
                            {name: "口腔护理", key: "口腔护理"},
                            {name: "美妆美发", key: "头发护理"},
                        ]
                    },
                    {
                        name: "母婴亲子",
                        child: [
                            {name: "童装", key: "儿童"},
                            {name: "童鞋", key: "童鞋"},
                            {name: "童书", key: "童书"},
                            {name: "玩具", key: "童车"},
                            {name: "出行", key: "儿童"},
                        ]
                    },
                    {
                        name: "图书音像",
                        child: [
                            {name: "图书杂志", key: "图书"},
                            {name: "电子书刊", key: "图书"},
                            {name: "音像影音", key: "影音"},
                        ]
                    },
                ]
            }
        },
        methods: {
            handleClick (e) {
                console.log(e);
                var _this = this;
                this.$http
                    .get('https://search.akashisai.top/shop/you/?format=json&search=' + e)
                    .then(function (res) {
                        // console.log(res);
                        _this.$router.push({
                          name:'search',
                          params:{
                            data: res.data,
                            baseUrl: 'https://search.akashisai.top/shop/you/?format=json&search=' + e
                          }
                        });
                    }
                    )
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        }
    };
</script>

